<!DOCTYPE html>
<html lang="en">

<head>



  <!-- 音乐 -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!-- 取消携带referrer，解决vue页面img标签的src属性值为网络图片地址，但是获取不到图片的问题 -->
  <meta name="referrer" content="no-referrer">
  <!-- <TITLE>2020年最好看的花瓣</TITLE> -->
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    .container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: #000000;
    }
  </style>
  <!-- //sss -->
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
  <script type="text/javascript" src="/static/live2dw/lib/L2Dwidget.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>
  <div id="live2d-widget">
    <canvas id="live2dcanvas">
  </div>
  <!-- <script type="text/javascript" src="/static/live2dw/lib/L2Dwidget.min.js"></script> -->




  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <!-- <div id="jsi-cherry-container" class="container"></div> -->
  <script>
    // var RENDERER = {
    //   INIT_CHERRY_BLOSSOM_COUNT: 30,
    //   MAX_ADDING_INTERVAL: 10,

    //   init: function () {
    //     this.setParameters();
    //     this.reconstructMethods();
    //     this.createCherries();
    //     this.render();
    //   },
    //   setParameters: function () {
    //     this.$container = $('#jsi-cherry-container');
    //     this.width = this.$container.width();
    //     this.height = this.$container.height();
    //     this.context = $('<canvas />').attr({ width: this.width, height: this.height }).appendTo(this.$container).get(0).getContext('2d');
    //     this.cherries = [];
    //     this.maxAddingInterval = Math.round(this.MAX_ADDING_INTERVAL * 1000 / this.width);
    //     this.addingInterval = this.maxAddingInterval;
    //   },
    //   reconstructMethods: function () {
    //     this.render = this.render.bind(this);
    //   },
    //   createCherries: function () {
    //     for (var i = 0, length = Math.round(this.INIT_CHERRY_BLOSSOM_COUNT * this.width / 1000); i < length; i++) {
    //       this.cherries.push(new CHERRY_BLOSSOM(this, true));
    //     }
    //   },
    //   render: function () {
    //     requestAnimationFrame(this.render);
    //     this.context.clearRect(0, 0, this.width, this.height);

    //     this.cherries.sort(function (cherry1, cherry2) {
    //       return cherry1.z - cherry2.z;
    //     });
    //     for (var i = this.cherries.length - 1; i >= 0; i--) {
    //       if (!this.cherries[i].render(this.context)) {
    //         this.cherries.splice(i, 1);
    //       }
    //     }
    //     if (--this.addingInterval == 0) {
    //       this.addingInterval = this.maxAddingInterval;
    //       this.cherries.push(new CHERRY_BLOSSOM(this, false));
    //     }
    //   }
    // };
    // var CHERRY_BLOSSOM = function (renderer, isRandom) {
    //   this.renderer = renderer;
    //   this.init(isRandom);
    // };
    // CHERRY_BLOSSOM.prototype = {
    //   FOCUS_POSITION: 300,
    //   FAR_LIMIT: 600,
    //   MAX_RIPPLE_COUNT: 100,
    //   RIPPLE_RADIUS: 100,
    //   SURFACE_RATE: 0.5,
    //   SINK_OFFSET: 20,

    //   init: function (isRandom) {
    //     this.x = this.getRandomValue(-this.renderer.width, this.renderer.width);
    //     this.y = isRandom ? this.getRandomValue(0, this.renderer.height) : this.renderer.height * 1.5;
    //     this.z = this.getRandomValue(0, this.FAR_LIMIT);
    //     this.vx = this.getRandomValue(-2, 2);
    //     this.vy = -2;
    //     this.theta = this.getRandomValue(0, Math.PI * 2);
    //     this.phi = this.getRandomValue(0, Math.PI * 2);
    //     this.psi = 0;
    //     this.dpsi = this.getRandomValue(Math.PI / 600, Math.PI / 300);
    //     this.opacity = 0;
    //     this.endTheta = false;
    //     this.endPhi = false;
    //     this.rippleCount = 0;

    //     var axis = this.getAxis(),
    //       theta = this.theta + Math.ceil(-(this.y + this.renderer.height * this.SURFACE_RATE) / this.vy) * Math.PI / 500;
    //     theta %= Math.PI * 2;

    //     this.offsetY = 40 * ((theta <= Math.PI / 2 || theta >= Math.PI * 3 / 2) ? -1 : 1);
    //     this.thresholdY = this.renderer.height / 2 + this.renderer.height * this.SURFACE_RATE * axis.rate;
    //     this.entityColor = this.renderer.context.createRadialGradient(0, 40, 0, 0, 40, 80);
    //     this.entityColor.addColorStop(0, 'hsl(330, 70%, ' + 50 * (0.3 + axis.rate) + '%)');
    //     this.entityColor.addColorStop(0.05, 'hsl(330, 40%,' + 55 * (0.3 + axis.rate) + '%)');
    //     this.entityColor.addColorStop(1, 'hsl(330, 20%, ' + 70 * (0.3 + axis.rate) + '%)');
    //     this.shadowColor = this.renderer.context.createRadialGradient(0, 40, 0, 0, 40, 80);
    //     this.shadowColor.addColorStop(0, 'hsl(330, 40%, ' + 30 * (0.3 + axis.rate) + '%)');
    //     this.shadowColor.addColorStop(0.05, 'hsl(330, 40%,' + 30 * (0.3 + axis.rate) + '%)');
    //     this.shadowColor.addColorStop(1, 'hsl(330, 20%, ' + 40 * (0.3 + axis.rate) + '%)');
    //   },
    //   getRandomValue: function (min, max) {
    //     return min + (max - min) * Math.random();
    //   },
    //   getAxis: function () {
    //     var rate = this.FOCUS_POSITION / (this.z + this.FOCUS_POSITION),
    //       x = this.renderer.width / 2 + this.x * rate,
    //       y = this.renderer.height / 2 - this.y * rate;
    //     return { rate: rate, x: x, y: y };
    //   },
    //   renderCherry: function (context, axis) {
    //     context.beginPath();
    //     context.moveTo(0, 40);
    //     context.bezierCurveTo(-60, 20, -10, -60, 0, -20);
    //     context.bezierCurveTo(10, -60, 60, 20, 0, 40);
    //     context.fill();

    //     for (var i = -4; i < 4; i++) {
    //       context.beginPath();
    //       context.moveTo(0, 40);
    //       context.quadraticCurveTo(i * 12, 10, i * 4, -24 + Math.abs(i) * 2);
    //       context.stroke();
    //     }
    //   },
    //   render: function (context) {
    //     var axis = this.getAxis();

    //     if (axis.y == this.thresholdY && this.rippleCount < this.MAX_RIPPLE_COUNT) {
    //       context.save();
    //       context.lineWidth = 2;
    //       context.strokeStyle = 'hsla(0, 0%, 100%, ' + (this.MAX_RIPPLE_COUNT - this.rippleCount) / this.MAX_RIPPLE_COUNT + ')';
    //       context.translate(axis.x + this.offsetY * axis.rate * (this.theta <= Math.PI ? -1 : 1), axis.y);
    //       context.scale(1, 0.3);
    //       context.beginPath();
    //       context.arc(0, 0, this.rippleCount / this.MAX_RIPPLE_COUNT * this.RIPPLE_RADIUS * axis.rate, 0, Math.PI * 2, false);
    //       context.stroke();
    //       context.restore();
    //       this.rippleCount++;
    //     }
    //     if (axis.y < this.thresholdY || (!this.endTheta || !this.endPhi)) {
    //       if (this.y <= 0) {
    //         this.opacity = Math.min(this.opacity + 0.01, 1);
    //       }
    //       context.save();
    //       context.globalAlpha = this.opacity;
    //       context.fillStyle = this.shadowColor;
    //       context.strokeStyle = 'hsl(330, 30%,' + 40 * (0.3 + axis.rate) + '%)';
    //       context.translate(axis.x, Math.max(axis.y, this.thresholdY + this.thresholdY - axis.y));
    //       context.rotate(Math.PI - this.theta);
    //       context.scale(axis.rate * -Math.sin(this.phi), axis.rate);
    //       context.translate(0, this.offsetY);
    //       this.renderCherry(context, axis);
    //       context.restore();
    //     }
    //     context.save();
    //     context.fillStyle = this.entityColor;
    //     context.strokeStyle = 'hsl(330, 40%,' + 70 * (0.3 + axis.rate) + '%)';
    //     context.translate(axis.x, axis.y + Math.abs(this.SINK_OFFSET * Math.sin(this.psi) * axis.rate));
    //     context.rotate(this.theta);
    //     context.scale(axis.rate * Math.sin(this.phi), axis.rate);
    //     context.translate(0, this.offsetY);
    //     this.renderCherry(context, axis);
    //     context.restore();

    //     if (this.y <= -this.renderer.height / 4) {
    //       if (!this.endTheta) {
    //         for (var theta = Math.PI / 2, end = Math.PI * 3 / 2; theta <= end; theta += Math.PI) {
    //           if (this.theta < theta && this.theta + Math.PI / 200 > theta) {
    //             this.theta = theta;
    //             this.endTheta = true;
    //             break;
    //           }
    //         }
    //       }
    //       if (!this.endPhi) {
    //         for (var phi = Math.PI / 8, end = Math.PI * 7 / 8; phi <= end; phi += Math.PI * 3 / 4) {
    //           if (this.phi < phi && this.phi + Math.PI / 200 > phi) {
    //             this.phi = Math.PI / 8;
    //             this.endPhi = true;
    //             break;
    //           }
    //         }
    //       }
    //     }
    //     if (!this.endTheta) {
    //       if (axis.y == this.thresholdY) {
    //         this.theta += Math.PI / 200 * ((this.theta < Math.PI / 2 || (this.theta >= Math.PI && this.theta < Math.PI * 3 / 2)) ? 1 : -1);
    //       } else {
    //         this.theta += Math.PI / 500;
    //       }
    //       this.theta %= Math.PI * 2;
    //     }
    //     if (this.endPhi) {
    //       if (this.rippleCount == this.MAX_RIPPLE_COUNT) {
    //         this.psi += this.dpsi;
    //         this.psi %= Math.PI * 2;
    //       }
    //     } else {
    //       this.phi += Math.PI / ((axis.y == this.thresholdY) ? 200 : 500);
    //       this.phi %= Math.PI;
    //     }
    //     if (this.y <= -this.renderer.height * this.SURFACE_RATE) {
    //       this.x += 2;
    //       this.y = -this.renderer.height * this.SURFACE_RATE;
    //     } else {
    //       this.x += this.vx;
    //       this.y += this.vy;
    //     }
    //     return this.z > -this.FOCUS_POSITION && this.z < this.FAR_LIMIT && this.x < this.renderer.width * 1.5;
    //   }
    // };
    // $(function () {
    //   RENDERER.init();
    // });
  </script>
</body>
<script type="text/javascript" charset="utf-8"
  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
<script type="text/javascript">
  L2Dwidget.init({
    "display": {
      "superSample": 2,
      "width": 200,
      "height": 400,
      "position": "right",//设置看板娘的位置
      "hOffset": 0,
      "vOffset": 0,

    },
    "react": {
      opacity: 0.5
    }
  });
  window.onload = function () {
    $("#live2dcanvas").attr("opacity: 0.7; pointer-events: none;")
  }
</script>

</html>